<script setup lang="ts">

import {onMounted, ref} from "vue";
import MyAxios from "../plugins/myAxios.ts";

onMounted(() => {
  MyAxios.get("/group/search/groups")
   .then((response) => {
      console.log(response.data);
      groups.value = response.data.data;
      console.log(groups.value);
    })
   .catch((error) => {
     console.log(error);
   })
})

const groups = ref(<{
  id: number;
  groupName: string;
  groupAnnouncement: string;
  userNumber: number;
}[]>([]));


const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const onLoad = () => {
  setTimeout(() => {
    if (refreshing.value) {
      groups.value = [];
      refreshing.value = false;
    }

    loading.value = false;

    if (groups.value.length >= 40) {
      finished.value = true;
    }
  }, 1000);
};



</script>

<template>

  <van-list v-model="loading" :finished="finished"  finished-text="没有更多了" @load="onLoad" :offset="20">
  <van-card
      class="show-card"
      v-for="item in groups"
      :desc="item.groupName"
      :num="item.groupAnnouncement"
  />

  </van-list>
</template>

<style scoped>

</style>


